<template>
  <div class="divShow">
    <el-row>
      <el-col :span="24">
        <div style="padding: 30px;">
          <!-- 搜索框 -->
          <el-form :inline="true" :model="searchWmsUseList" class="demo-form-inline" v-if="showSearch">
            <el-form-item label="仓库编码">
              <el-input v-model="searchWmsUseList.warehouseCode" placeholder="请输入仓库编码"></el-input>
            </el-form-item>
            <el-form-item label="仓库名称">
              <el-input v-model="searchWmsUseList.warehouseName" placeholder="请输入仓库名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="checkWmsUse">查询</el-button>
              <el-button @click="cleanWmsUse">重置</el-button>
            </el-form-item>
          </el-form>


          <el-row>
            <el-col :span="22">
              <!-- 按钮 -->
              <el-button type="primary" size="small" @click="changeDialog(null)">新增</el-button>
              <el-button type="success" size="small" :disabled="!judgmentCh"
                         @click="changeDialog(SelWmsUseId)">修改</el-button>
              <el-button type="danger" size="small" :disabled="!judgmentDe"
                         @click="delMdItemIdArray(arrayWmsUseId)">删除</el-button>
            </el-col>
            <el-col :span="2">
              <div>
                <el-tooltip content="隐藏搜索" placement="top">
                  <el-button icon="el-icon-search" circle @click="toggleSearch"></el-button>
                </el-tooltip>
                <el-tooltip content="刷新" placement="top">
                  <el-button icon="el-icon-refresh" circle @click="refresh"></el-button>
                </el-tooltip>
              </div>
            </el-col>
          </el-row>



          <!-- 表格 -->
          <el-table :data="productTable" style="width: 100%;" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55">
            </el-table-column>
<!--            <el-table-column prop="warehouseId" label="仓库Id" v-if="false">-->
<!--            </el-table-column>-->
            <el-table-column label="入库单编号" width="180">
              <template slot-scope="scope">
                <!-- 使用内联样式设置字体颜色为浅蓝色，并添加点击事件 -->
                <span style="color: #87CEEB; cursor: pointer;" @click="handleWarehouseCodeClick(scope.row.noticeCode)">
            {{ scope.row.noticeCode }}
    </span>
              </template>
            </el-table-column>
            <el-table-column prop="noticeName" label="通知单名称">
            </el-table-column>
            <el-table-column prop="poCode" label="采购订单号">
            </el-table-column>
            <el-table-column prop="vendorName" label="供应商名称">
            </el-table-column>
            <el-table-column prop="contact" label="联系人">
            </el-table-column>
            <el-table-column prop="tel" label="联系方式" width="180">
            </el-table-column>
            <el-table-column prop="arrivalDate" label="到货日期" width="180">
            </el-table-column>
            <el-table-column prop="status" label="单据状态" width="180">
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <div v-if="scope.row.status === '草稿'">
                <el-col :span="12">
                  <el-link type="primary" @click="changeDialog(scope.row.warehouseId)">修改</el-link>
                </el-col>
                <el-col :span="12">
                  <el-link type="primary" @click="delDialog(scope.row.warehouseId)">删除</el-link>
                </el-col>
                </div>
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页模块 -->
          <el-pagination :page-size="searchWmsUseList.pageSize" :total="searchWmsUseList.total"
                         @current-change="searchProductChange" layout="prev, pager, next">
          </el-pagination>

          <!-- dialog -->
          <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="60%" class="rounded-dialog"
                     :close-on-click-modal="false" @close="closeMdItemDialog">
            <el-form :model="AddWmsUseList" ref="AddWmsUseList" :rules="rules" style="padding-left:50px;">

              <el-row>
                <el-col :span="12">
                  <el-form-item label="仓库编码" prop="warehouseCode">
                    <el-input v-model="AddWmsUseList.warehouseCode" autocomplete="off"
                              style="width: 180px;" placeholder="请输入仓库编码"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="仓库名称" prop="warehouseName">
                    <el-input v-model="AddWmsUseList.warehouseName" autocomplete="off"
                              style="width: 180px;" placeholder="请输入仓库名称"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="12">
                  <el-form-item label="负责人" prop="charge">
                    <el-input v-model="AddWmsUseList.charge" autocomplete="off" style="width: 180px;"
                              placeholder="请输入负责人"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="padding-top: 20px;">
                <el-col :span="24">
                  <el-form-item label="面积" prop="area">
                    <el-input-number v-model="AddWmsUseList.area"
                                     label="请输入面积"></el-input-number>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="padding-top: 20px;">
                <el-col :span="24">
                  <el-form-item label="位置" prop="location">
                    <el-input v-model="AddWmsUseList.location" type="textarea" :rows="2"
                              autocomplete="off" style="width: 640px;" placeholder="请输入位置"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row style="padding-top: 20px;">
                <el-col :span="24">
                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="AddWmsUseList.remark" type="textarea" :rows="2"
                              autocomplete="off" style="width: 640px;" placeholder="请输入备注"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="closeMdItemDialog">取 消</el-button>
              <el-button type="primary" @click="submitForm('AddWmsUseList')">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>

  </div>
</template>
<script>
import axios from 'axios';
import { getMaxListeners } from 'node-notifier';
import qs from 'qs';
export default {
  data() {
    return {
      // 设置dialog默认不显示
      dialogFormVisible: false,
      //根据是否有id输入判断标题
      dialogTitle: '',
      // 分页查询数据
      searchWmsUseList: {
        noticeCode: '',
        vendorName: '',
        pageSize: 5,
        pageNo: 1,
        total: 0,
      },
      // 查询显示表格
      productTable: [],
      //新增MdItem或者修改MdItem
      AddWmsUseList: {
        warehouseId:1,
        warehouseCode: '',
        warehouseName: '',
        area: 1,
        remark: '',
        location: '',
        charge: ''
      },
      // 验证规则
      rules: {
        warehouseCode: [
          { required: true, message: '请输入仓库编码', trigger: 'blur' }
        ],
        warehouseName: [
          { required: true, message: '请输入仓库名称', trigger: 'blur' }
        ],
        location: [
          { required: true, message: '请输入位置', trigger: 'blur' }
        ],
        area: [
          { required: true, message: '请输入面积', trigger: 'blur' }
        ],
        charge: [
          { required: true, message: '请输入负责人', trigger: 'blur' }
        ],
        remark: [
          { required: false, message: '请输入备注', trigger: 'blur' }
        ]
      },
      selectedRows: [],
      judgmentCh: false,
      judgmentDe: false,
      //当前选中行的MdItemId的数组
      arrayWmsUseId: [],
      // 获取当前选中行的MdItemId
      SelWmsUseId: '',
      showSearch: true, // 控制搜索框的显示和隐藏
    }
  },

  mounted() {
    this.checkWmsUse();
  },
  methods: {
    //刷新按钮
    refresh() {
      location.reload();
    },
    //是否显示搜索框
    toggleSearch() {
      // 切换搜索框的显示和隐藏
      this.showSearch = !this.showSearch;
    },
    //获取当前选中表格行的状态
    handleSelectionChange(selection) {
      this.selectedRows = selection;
      console.log(this.selectedRows);

      if (selection.length === 1) {
        //获取单个id
        this.SelMdItemId = this.selectedRows[0].itemId
        console.log(this.SelMdItemId);

        this.judgmentDe = true;
        this.judgmentCh = true;
      } else if (selection.length > 1) {
        //获取一组id
        let rowsLength = this.selectedRows.length
        for (let index = 0; index < rowsLength; index++) {
          this.arrayMdItemId[index] = this.selectedRows[index].itemId;
        }
        this.judgmentCh = false;
        this.judgmentDe = true;
      } else {
        this.judgmentCh = false;
        this.judgmentDe = false;
      }
    },
    handleWarehouseCodeClick(warehouseId){
      this.dialogFormVisible = true
      this.dialogTitle = "查看仓库"
      this.AddWmsUseList.warehouseId = warehouseId
      this.checkWmsById(warehouseId);
    },
    //根据传递进来的MdItemId数组来进行批量删除
    delMdItemIdArray(arrayMdItemId) {
      this.$confirm('确定要删除这批信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let qsArrayMdItemId = qs.stringify(arrayMdItemId);
        console.log(arrayMdItemId);
        console.log(qsArrayMdItemId);
        const pureArray = JSON.parse(JSON.stringify(arrayMdItemId));
        console.log(pureArray);

        this.$axios.delete("http://localhost:9970/emsSystem/api/MdItem/delMdItemArray", { data: arrayMdItemId }).then((res) => {
          if (res.data.code === 200) {
            //删除成功
            this.$message.success("删除成功");
            this.checkListMdItem();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //根据id删除指定数据
    delDialog(mdItemId) {
      this.$confirm('确定要删除该条信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete("http://localhost:9970/emsSystem/api/MdItem/delMdItem/" + mdItemId).then((res) => {
          if (res.data.code === 200) {
            //删除成功
            this.$message.success("删除成功");
            this.checkListMdItem();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //关闭dialog并且清空里面的数据
    closeMdItemDialog() {
      this.$refs.AddWmsUseList.resetFields();
      this.dialogFormVisible = false
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 表单验证通过，执行提交操作
          this.addWmsUseList();
        } else {
          console.log('表单验证失败');
          return false;
        }
      });
    },
    //添加或者修改MdItem
    addWmsUseList() {

      let qsMdItem = qs.stringify(this.AddWmsUseList);
      console.log(qsMdItem);
      this.$axios.post("http://localhost:9970/emsSystem/api/was/edit", qsMdItem).then((res) => {
        if (res.data.code === 200) {
          //修改成功
          this.$message.success("修改或新增成功");
          this.dialogFormVisible = false;
          this.checkListWmsUse();
        }
      })
    },
    //改变dialog显示状态
    changeDialog(warehouseId) {
      this.dialogFormVisible = true
      if (warehouseId == null) {
        this.dialogTitle = "新增物料/产品"
      } else {
        console.log(warehouseId);
        this.dialogTitle = "修改物料/产品"
        this.AddWmsUseList.warehouseId = warehouseId
        this.checkWmsById(warehouseId);
      }
    },
    getWmsOutList(warehouseId){
      localStorage.setItem('warehouseId', warehouseId);
      this.$router.push('/WmsStoList');
    },
    //根据mdItemId查询数据
    checkWmsById(warehouseId) {
      this.$axios.post("http://localhost:9970/emsSystem/api/was/editList/" + warehouseId).then((res) => {
        console.log(warehouseId)
        if (res.data.code === 200) {
          this.AddWmsUseList = res.data.data
        }
      })
    },
    // 改变页码
    searchProductChange(value) {
      this.searchWmsUseList.pageNo = value;
      this.checkListMdItem();
    },
    // 进行条件搜索
    checkWmsUse() {
      this.checkListWmsUse();
    },
    // 清空搜索框
    cleanWmsUse() {
      this.searchProduct.itemCode = ""
      this.searchProduct.itemName = ""
    },
    // 查询MdItem数据方法
    checkListWmsUse() {
      let qsStr = qs.stringify(this.searchWmsUseList);
      const parsedData = qs.parse(qsStr);
      let jsonStr = JSON.stringify(parsedData);
      console.log(jsonStr);
      this.$axios.post("http://localhost:9970/emsSystem/api/WmArr/getPageList", jsonStr,{
        headers: {
          'Content-Type': 'application/json' // 明确指定 Content-Type 为 application/json
        }
      }).then((res) => {
        if (res.data.code === 200) {
          this.productTable = res.data.data.records
          this.searchWmsUseList.pageNo = res.data.data.current
          this.searchWmsUseList.pageSize = res.data.data.size
          this.searchWmsUseList.total = res.data.data.total
        }
      })
    }
  }
}
</script>
<style>
.divShow {
  background-color: white;
  border-radius: 10px;
}

.rounded-dialog .el-dialog {
  border-radius: 10px;
  /* 设置圆角 */
}
</style>
